<!doctype html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" type="text/css" href="${staticpath}/front/dist/css/sm.css">
    <link rel="stylesheet" type="text/css" href="${staticpath}/front/dist/css/base.css">
    <title>打卡记录</title>
    <style>
        .resign{height: 100%;line-height: 45px;}
        p{margin: 0;}
        .record-hd{ padding:5px;}
        .record-hd  span:last-child{  float: right;}
        .record-item{height: 50px;line-height: 50px;background: #fff;border-bottom: 1px solid #dadada;}
        .record-item >img{border-radius: 50%;vertical-align: middle;width: 35px;height: 35px;margin-right: 10px;margin-left: 5px;}
        .record-item .item-time{margin-right: 5px;}
    </style>
</head>
<body>
<div class="page-group">
    <div class="page" data-url="${basepath}/front/offline/toOfflineSignList" >
        <!--头部内容 !-->
        <header class="bar bar-nav">
            <a class="icon icon-left pull-left back" onclick="javascript:history.back(-1);">返回</a>
            <h1 class="title">打卡记录 <span class="pull-right qrcode iconfont icon-erweima"></span></h1>
            <a href="${basepath}/front/offline/toOfflineResign" class="pull-right resign">补卡</a>
        </header>
        <div class="content">
            <div class="buttons-tab">
                <a href="#signRecord" class="tab-link active button">签到记录</a>
                <a href="#resignRecord" class="tab-link button">签退记录</a>
            </div>
            <div class="tabs">
                <#--打卡记录-->
                <div id="signRecord" class="tab active">
                    <p class="record-hd"> <span>签到人</span><span>签到时间</span></p>
                    <div class="record-main my-sign-in-record">
                       <#--签到待审核html-->
                    </div>
                    <div class="record-main sign-in-list">
                        <#--签到记录html-->
                    </div>
                </div>
                 <#--补卡记录-->
                <div id="resignRecord" class="tab">
                    <p class="record-hd"> <span>签退人</span><span>签退时间</span></p>
                    <div class="record-main my-sign-out-record">
                       <#--签退待审核记录html-->
                    </div>
                    <div class="record-main sign-out-list">
                        <#--签退记录html-->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>




<script type='text/javascript' src='${staticpath}/front/dist/js/lib/zepto.js' charset='utf-8'></script>
<script>
    $.config={
        router:false
    }
</script>
<script type='text/javascript' src='${staticpath}/front/dist/js/lib/sm.js' charset='utf-8'></script>
<script>
    <#--机构不能补卡-->
    if(sessionStorage.role==1){
        $('.resign').hide();
    }
    function getQueryString(name) {
        var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
        var r = window.location.search.substr(1).match(reg);
        if (r != null) {
            return unescape(r[2]);
        }
        return null;
    }
    //当前活动id
    var id = getQueryString("id");
    $('.resign').attr('href','${basepath}/front/offline/toOfflineResign?offlineId='+id+'')
//    查询打卡记录和签退记录列表
    $.ajax({
        url:'/front/retroactive/signRecords',
        type:'GET',
        dataType:'json',
        data:{
            offlineID:id
        },
        success:function(res){
            if(res.success){
                var signInList=res.data.signInList,
                    signOutList=res.data.signOutList,
                    signInHtml='',signOutHtml='';

                //  签到列表
                $.each(signInList,function(i,o){
                    signInHtml+='<div class="record-item"> <img src="'
                    + o.accountImg+'"/><span class="item-name">'
                    + o.accountName+'</span><span class="item-time pull-right">'
                    + o.signInTime+'</span></div>'
                })
                $('.sign-in-list').html(signInHtml);

                //  签退列表
                $.each(signOutList,function(i,o){
                    signOutHtml+='<div class="record-item"> <img src="'
                    + o.accountImg+'"/><span class="item-name">'
                    + o.accountName+'</span><span class="item-time pull-right">'
                    + o.signOutTime+'</span></div>'
                })
                $('.sign-out-list').html(signOutHtml);
            }
        }
    })

//    查询用户补卡记录
    $.ajax({
        url:'/front/retroactive/approvalRecord',
        type:'GET',
        dataType:'json',
        data:{
            offlineId:id
        },
    success:function(res){
        if(res.success){
//            如果用户自身有待审核状态的 记录 显示在第一条
            if(res.data.inRecord!=''&&res.data.inRecord!=null&&res.data.inRecord!=undefined){
                var oHtml=' <div class="record-item"> <img src="'
                        +res.data.inRecord.headimgurl+'" /> <span class="item-name">'
                        +res.data.inRecord.name+'</span> <span class="item-time pull-right">待审核</span></div>'
                $('.my-sign-in-record').html(oHtml)
            }
//            签退
            if(res.data.outRecord!=''&&res.data.outRecord!=null&&res.data.outRecord!=undefined){
                var oHtml=' <div class="record-item"> <img src="'
                        +res.data.inRecord.headimgurl+'" /> <span class="item-name">'
                        +res.data.inRecord.name+'</span> <span class="item-time pull-right">待审核</span></div>'
                $('.my-sign-in-record').html(oHtml)
            }
        }
    }
    });


    $.init();
</script>
</body>
</html>